<template>
	<view class="bg">
		<!-- 返回和标题 -->
		<view class="content-title">
			<view class="title-left" @click="goToBack">
				<u-icon label="" size="20" name="arrow-left" color="#000"></u-icon>
			</view>
			<view class="title-right">
				预约下单
			</view>

		</view>





		<view class="kong">

			<!-- 头部选项 -->
		</view>
		<view class="bg-white shadow header ">
			<view class="title">
				<u-icon name="map-fill" label="选择回收品类" color="#89DFD7" labelColor="#36B7AB" space="5px" labelSize="17px"
					size="30px"></u-icon>

			</view>
			<view class=" header-list ">
				<view class=" titlelist" v-for="(item, i) in type" :key="i" :class="index==i?'type-border':''"
					@click="choose(i)">
					<view class=" box">

						<image :src="item.src" mode="widthFix" class="shadow"></image>
					</view>
					<view class="text" :class="index==i?'text-color':''">{{item.name}}</view>
				</view>
			</view>
		</view>

		<!-- 地址选择 -->
		<view class="address">

			<jpSelect @selected-index-change="handleSelectedIndexChange" @data-updated="handleData" class="seAddress"
				@selectAddress="selectAddress" @delAddress="delAddress" ref="jpSelect" :list="list" @checked="checked"
				:item="item" tite="请选择地址">
			</jpSelect>
		</view>



		<!-- 选择重量 -->
		<view class="weight">
			<view class="icon">
				<u-icon name="minus-square-fill" label="选择预估重量" labelColor="#36B7AB" color="#89DFD7" space="5px"
					labelSize="17px" size="30px"></u-icon>
			</view>
			<view class="choose">
				<view class="weight-list" :class="typeList==i?'back':''" @click="weight(i)" v-for="item,i in weightList"
					:key="i">
					<text v-if="item.weight2 == ''">100Kg以上</text>
					<text v-else>{{item.weight1}}-{{item.weight2}}Kg</text>
				</view>


			</view>
			<view class="money">
				<view class="moneylist" v-for="item,moneyIndex in type" :key="moneyIndex" v-if="index==moneyIndex">
					<view class="earnings" v-for="item1,arnings in weightList" :key="arnings" v-if="arnings==typeList">
						<text class="pice">预估收益:</text>
						<u-icon name="rmb-circle-fill" color="#FFAA00" size="12px"></u-icon>
						<u-count-to class="sport" :startVal="1" :endVal="(item.unitPrice*item1.weight1)" color="FFAA00"
							fontSize="12px"></u-count-to>
						<text class="jianhao">-</text>
						<u-count-to class="sport" :startVal="1" :endVal="item.unitPrice*item1.weight2" color="FFAA00"
							fontSize="12px"></u-count-to>
						<text class="yuan">元</text>
					</view>
					<view class="unitPrice">
						<text class="pice1">单价:</text>

						<!-- <u-count-to class="sport1" :startVal="1" color="000" fontSize="12px"></u-count-to> -->
						<text class="kg">{{item.unitPrice}}元/Kg</text>
					</view>




				</view>

			</view>
		</view>

		<!-- 选择上门时间 -->
		<liu-delivery-time @change="changeTime" ref="chooseTime" title="请选择预约时间"></liu-delivery-time>
		<div class="selectTime">
			<div class="sel">期望上门时间</div>
			<div class="ser" @click="open">
				<div class="setTime">{{ dayTime }}</div>
				<div class="setIcon"><u-icon name="arrow-right" color="#999" size="18"></u-icon></div>
			</div>
		</div>

		<!-- 附近门店 -->
		<view class="store">
			<view class="title"><text>附近门店</text></view>
			<view class="storeList" v-for="item,i in store" :key="i" @click="stores(i)"
				:class="storelist==i?'storeborder':''">
				<view class="left">
					<image :src="item.images" mode=""></image>
				</view>
				<view class="right">
					<view class="name">{{item.name}}</view>
					<view class="distance">
						<u-icon name="map-fill" space="5px" :label="item.createTime+ 'km'" color="#36B7AB"
							labelSize="14px" size="44rpx"></u-icon>
					</view>
					<view class="map1">
						<u-icon name="file-text-fill" space="5px" color="#36B7AB" lable="" size=" 44rpx"></u-icon>
						<text>{{item.address}}</text>
					</view>




				</view>
			</view>
		</view>

		<view class="bottom">
			<view class="left">
				<text class="text1">确认下单将自动默认</text>
				<text class="text2">《上门条款》</text>
			</view>
			<view class="right">
				<u-button type="primary" text="确认下单" @click="goToPlaceOrder"></u-button>

			</view>

		</view>






	</view>
</template>

<script>
	import jpSelect from '@/components/jp-select/jp-select.vue';
	import OrderApi from '@/common/FindingService/OrderApi.js';
	export default {
		components: {
			jpSelect
		},
		data() {
			return {
				dayTime: '',
				index: '',
				tab: false,
				doorNumber: '',
				item: '',
				addresslist: '',
				list: [],
				edit: [],

				type: [{
						name: '纸品类',
						src: '../../static/zhixiang.svg',
						unitPrice: '0.8',

					},
					{
						name: '金属',
						src: '../../static/jinshu.png',
						unitPrice: '10.0',
					},
					{
						name: '塑料',
						src: '../../static/shuiping.svg',
						unitPrice: '1.0',
					},
					{
						name: '纺织物',
						src: '../../static/yifu.svg',
						unitPrice: '4.0',
					}, {
						name: '家电',
						src: '../../static/bingxiang.png',
						unitPrice: '10.0',
					},
					{
						name: '其它',
						src: '../../static/qita.svg',
						unitPrice: '00',
					},
				],
				weightList: [{
						weight1: '10',
						weight2: '20'
					},
					{
						weight1: '20',
						weight2: '50'
					},
					{
						weight1: '50',
						weight2: '100'
					},
					{
						weight1: '100',
						weight2: ''
					},
				],
				store: [],
				selectedItemIndex: '',
				typeList: 1,
				storelist: 0,
				// weight1:'',
				// weight2:'',
				currentTime: '',
				userId: '',
				selecteAddress: '',
				updatedUser: '',


			}
		},
		mounted() {
			// this.choose(0);
			this.weight(0);
			this.stores(0);
			//全局变量用户ID
			this.userId = uni.getStorageSync('userId');
			this.address();
			console.log('this.userId', this.userId)
			this.appointStore()
			this.updatedUser = uni.getStorageSync('updatedUser');
		},
		created() {},
		onLoad(options) {
			this.index = options["index"];
		},
		methods: {
			//返回
			goToBack() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			//计算距离的方法
			calculateDistance(lat1, lon1, lat2, lon2) {
				const earthRadius = 6371; // 地球半径，单位为千米
				const dLat = this.toRadians(lat2 - lat1);
				const dLon = this.toRadians(lon2 - lon1);

				const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
					Math.cos(this.toRadians(lat1)) * Math.cos(this.toRadians(lat2)) *
					Math.sin(dLon / 2) * Math.sin(dLon / 2);

				const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
				const distance = earthRadius * c;

				// 保留两位小数
				return distance.toFixed(2);
			},

			toRadians(degrees) {
				return degrees * (Math.PI / 180);
			},
			//传递地址
			handleData(addressString) {
				this.selecteAddress = addressString; // 将接收到的数据保存到父组件的数据中
				console.log('this.selecteAddress', this.selecteAddress)
			},

			// 请求地址接口
			address() {
				console.log('this.userId', this.userId)
				let params = this.userId

				OrderApi.getAddress(params).then(res => {
					this.list = res.data.data
					console.log('请求结果', res)

				})

			},
			open() {
				this.$refs.chooseTime.open()
			},
			//选择的时间
			changeTime(e) {
				this.dayTime = e.value
			},
			handleSelectedIndexChange(index) {
				this.selectedItemIndex = index;
			},

			checked(el) {
				this.item = el
			},
			goToPlaceOrder() {
				if (!this.selecteAddress.seladdress) {
					uni.showToast({
						title: '请选择收货地址',
						icon: 'none',
						duration: 1000,
					})

				}
				if (!this.dayTime) {
					uni.showToast({
						title: '请填写预约上门时间',
						icon: 'none',
						duration: 1000,
					})
				} else {
					// 新增预约单接口
					let params = {
						maxWeight: this.weightList[this.typeList].weight2, //最大重量
						minWeight: this.weightList[this.typeList].weight1, //最小重量
						remark: '',
						recycleAddress: this.selecteAddress.seladdress, //上门地址
						rubbishId: this.index + 1, //回收类
						scheduledTime: this.dayTime, //预约上门时间
						shopAddress: this.store[this.storelist].name, //回收门店地址
						userId: this.userId, //用户id
						recycleLat: this.selecteAddress.sellat, //地址纬度
						recycleLon: this.selecteAddress.sellon, //地址经度
						shopLat: this.store[this.storelist].lat, //门店纬度
						shopLon: this.store[this.storelist].lon, //门店经度
						flag: '',
						shopAddressId: this.store[this.storelist].id

					};
					OrderApi.newOrder(params).then(res => {
						console.log('请求结果', res)

						uni.showToast({
							title: '新增订单成功',
							icon: 'success',
							duration: 1000,
							complete: function() {
								setTimeout(function() {
									uni.navigateTo({
										url: '/pages/index/index'
									});
								}, 2000); // 这里设置延迟时间为2秒，可根据需要进行调整
							}
						});

					})
				}


			},
			//查询门店列表
			appointStore() {
				OrderApi.queryStore().then(res => {
					this.store = res.data
					for (var i = 0; i < this.store.length; i++) {
						this.store[i].images = 'https://www.gclive.cloud/api/v1/file/download?fileName=' + this
							.store[i].images

						this.store[i].createTime = 1.1 + i
						console.log('this.store[i].createTime', this.store[i].createTime)

					}



				})

			},
			stores(storelist) {
				this.storelist = storelist;

			},
			choose(i) {
				this.index = i;

			},
			weight(typeList) {
				this.typeList = typeList

			},

		}
	}
</script>

<style lang="scss">
	//顶部标题
	.content-title {
		background-color: #fff;
		color: #000;
		font-weight: bold;
		height: 100rpx;
		position: relative;
		font-size: 16px;

		.title-left {
			position: absolute;
			left: 30rpx;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.title-right {
			text-align: center;
			line-height: 100rpx;
		}
	}

	.bottom {
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 99;
		background-color: #fff;
		height: 100rpx;
		display: flex;
		margin: 0;
		justify-content: space-between;

		.left {
			text-align: center;
			line-height: 100rpx;
			height: 100rpx;
			font-size: 15px;
			margin-left: 30rpx;

			.text2 {
				color: #36B7AB;
			}
		}

		.right {
			display: flex;
			align-items: center;
			margin-right: 30rpx;

			button {
				height: 60rpx;
				font-size: 14px;
				line-height: 60rpx;
				border-radius: 30rpx;
				background-color: #36B7AB;
				color: #fff;

			}

		}
	}

	.header-list {
		display: flex;
		width: 100%;
		overflow-x: auto;
		white-space: nowrap;
		/* 防止子元素换行 */

		.titlelist {
			box-shadow: -7rpx 7rpx 22rpx #c5c6c9, 7rpx -7rpx 22rpx #ffffff;
			border-radius: 20rpx;
			width: 150rpx;
			margin-left: 30rpx;
			flex-shrink: 0;
			/* 防止子元素缩小 */
			text-align: center;

		}

	}


	.type-border {
		border-bottom: 1px solid #36B7AB;
	}

	.text-color {
		color: #36B7AB;
	}

	.store {
		width: 94%;
		background-color: #ffffff;
		margin: 30rpx auto;
		border-radius: 20rpx;
		padding-bottom: 200rpx;

		.title {
			text {
				display: block;
				margin: 0 auto;
				font-size: 20px;
				font-weight: bold;
				height: 50rpx;
				border-bottom: 8px solid #D7F5F2;

			}
		}


		.storeList {
			padding: 40rpx 0;
			border-radius: 20rpx;
			border-bottom: 1px dashed #36B7AB;
			display: flex;
			margin-bottom: 20rpx;
			width: 95%;
			margin: 15rpx auto;

			.left {
				margin-left: 20rpx;

				image {
					width: 150rpx;
					height: 150rpx;
				}
			}

			.right {
				margin-left: 30rpx;

				.name {
					padding-bottom: 10rpx;
					font-size: 20px;
					font-weight: bold;
				}

				.distance {
					margin-bottom: 10rpx;
				}

				.map1 {
					display: flex;

					text {
						margin-left: 13rpx;
						display: block;
						width: 90%;
						font-size: 14px;
					}

				}

			}
		}

		.storeborder {
			border: none;
			border: 2px solid #36B7AB;
		}
	}

	.selectTime {
		width: 94%;
		margin: 0 auto;
		margin-top: 30rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		height: 150rpx;

		display: flex;
		justify-content: space-between;
		align-items: center;

		.sel {
			padding-left: 35rpx;

			font-size: 17px;
			color: #36B7AB;
		}

		.ser {
			display: flex;
			padding-right: 35rpx;
			margin: 30rpx 0;
		}


	}

	.weight {
		width: 94%;
		margin: 0 auto;
		margin-top: 30rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding-bottom: 50rpx;

		.icon {
			padding: 20rpx;
		}

		.choose {
			display: flex;
			margin: 0 auto;
			width: 94%;
			justify-content: space-between;



			.weight-list {
				background-color: #EEEEEE;
				border-bottom: 2px solid #EEEEEE;
				color: #000;
				display: block;
				line-height: 80rpx;
				text-align: center;
				height: 80rpx;
				width: 160rpx;
				border-radius: 18rpx 18rpx 0 0;


			}

			.back {
				background-color: #36B7AB;
				border-bottom: 2px solid #36B7AB;
				color: #ffffff;
			}

		}

		.money {

			background-color: #36B7AB;
			width: 94%;
			margin: 0 auto;
			height: 200rpx;
			border-radius: 0 0 18rpx 18rpx;
			padding: 50rpx;

			.moneylist {
				display: flex;
				background-color: #ffffff;
				height: 100rpx;
				border-radius: 18rpx;
				justify-content: space-between;
				font-size: 12px;

				.earnings {
					display: flex;
				}

				.unitPrice {
					display: flex;
					margin-right: 20rpx;
				}

				.pice {
					color: #FFAA00;
					display: block;
					line-height: 100rpx;
					margin-left: 20rpx;

					font-weight: bold;
				}

				.pice1 {
					color: #000;
					display: block;
					line-height: 100rpx;
					margin-left: 20rpx;

					font-weight: bold;
				}

				.jianhao {
					color: #FFAA00;
					display: block;
					line-height: 100rpx;
					margin: 0 10rpx;

				}

				.yuan {
					color: #FFAA00;
					display: block;
					line-height: 100rpx;
					// margin-left: 20rpx;
					font-size: 16px;
				}

				.kg {
					color: 000;
					display: block;
					line-height: 100rpx;
					// margin-left: 20rpx;

				}

				.sport1 {
					color: #000;
					display: block;
					line-height: 100rpx;
					margin-left: 20rpx;

				}

				.sport {
					color: #FFAA00;
					display: block;
					line-height: 100rpx;


				}
			}
		}
	}

	.box {
		image {
			margin: 10rpx 0;
			width: 90rpx;
			height: 90rpx;
		}
	}

	.address {
		display: flex;
		background-color: #ffffff;
		width: 94%;
		margin: 0 auto;
		margin-top: 30rpx;
		border-radius: 20rpx;
		justify-content: space-between;
		padding-top: 15rpx;
		height: 230rpx;

		.seAddress {
			width: 100%;
		}
	}

	.grid.col-4>uni-view {
		width: 22%;
	}



	.title {
		display: flex;


		height: 90rpx;
		margin: 0 auto;
		padding: 20rpx;
		color: #36B7AB;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}

		text {
			display: block;
		}
	}

	.kong {
		width: 100%;
		height: 30rpx;
	}

	.bg {
		background-color: #EBF3F3;
	}

	.header {

		width: 94%;
		margin: 0 auto;
		box-shadow: none;
		border-radius: 20rpx;
		padding-bottom: 30rpx;


	}

	.type-border {
		border-bottom: #18B566 solid 6rpx;
	}

	.cu-list.menu-avatar>.cu-item .content {
		left: 40rpx
	}

	.cu-list.menu-avatar>.cu-item {
		height: 120rpx;
	}

	.cu-list.menu-avatar>.cu-item .action {
		width: 170rpx;
	}

	.fixBtn {
		position: fixed;
		bottom: calc(var(--window-bottom) + 110px);
		left: 20rpx;
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		text-align: center;
		z-index: 9999;
		-webkit-transition: opacity 0.3s ease;
	}
</style>